<template>
  <div id="chartBarA" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        title: {
          text: '2020审计问责及被问责反馈情况',
          left: 'center'
        },
        tooltip: {},
        legend: {
          data: ['审计问责数量', '被问责数量'],
          bottom: 0
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '审计问责数量',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
              normal: {
                color: '#FFCC00',
                lineStyle: {
                  color: '#FFCC00'
                },
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: [368, 425, 368, 501]
          },
          {
            name: '被问责数量',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
              normal: {
                color: '#FF9900',
                lineStyle: {
                  color: '#FF9900'
                },
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: [108, 121, 124, 150]
          }
        ]
      }
    }
  },

  mounted() {
    this.drawLine()
  },

  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartBarA'))
      // 绘制图表
      myChart.setOption(this.chartOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
